<template>
  <div class="head_assembly pt-re">
    <img
      @click="$router.push('/quickConsultation')"
      class="br-5 dp-ib cp"
      :src="
        login_info.face ||
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      "
      alt=""
    />
    <div class="info cp" @click="$router.push('/quickConsultation')">
      <div class="name">{{ login_info.realName }}专家，欢迎您！</div>
      <div class="local f-row ai-c">
        <img src="../../assets/images/head/local.png" alt="" />
        <span>{{ login_info.siteName || "未更新" }}</span>
      </div>
      <div class="name">
        <ul>
          <li>
            <div class="num">{{ expert_info.scoreAvg || 0 }}</div>
            <div class="category">评分</div>
          </li>
          <li>
            <div class="num">{{ expert_info.collectSum || 0 }}</div>
            <div class="category">粉丝</div>
          </li>
          <li>
            <div class="num">{{ expert_info.patientNum || 0 }}</div>
            <div class="category">接诊次数</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="setting f-row ai-c">
      <el-avatar
        class="mr-1"
        :src="
          login_info.face ||
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        "
      ></el-avatar>
      <el-dropdown @command="handleCommand" class="cp">
        <span class="el-dropdown-link">
          个人中心<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="my">个人中心</el-dropdown-item>
          <el-dropdown-item command="signout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },

  computed: {
    ...mapState(["expert_info", "login_info"]),
  },
  methods: {
  
    handleCommand(command) {
      if (command == "signout") {
        this.$store.commit("RESTSTATE");
        this.$router.push("/login");
      } else if (command == "my") {
        this.$router.push("/personalCenter");
      }
    },
  },
  mounted: function () {},
};
</script>
<style lang='less' scoped>
.el-dropdown {
  color: #fff;
}
.head_assembly {
  color: #fff;
  height: 100%;

  .dp-ib {
    width: 8.0625rem;
    height: 8.0625rem;
    margin-right: 2.875rem;
    position: absolute;
    top: 1.5rem;
    left: 3.75rem;
  }
  .name {
    font-weight: bold;
    font-size: 1.875rem;
  }
  .info {
    position: absolute;
    left: 14.6875rem;
    top: 2.125rem;
  }
  .local {
    color: #f1f1f1;
    font-size: 1rem;
    margin: 0.0625rem 0 0.4375rem;
    img {
      width: 0.8125rem;
      height: 1rem;
      margin-right: 0.4375rem;
    }
  }
  ul {
    display: flex;
    justify-content: space-between;
    li {
      display: inline-block;
      text-align: center;
      .category {
        color: #f1f1f1;
        font-size: 0.875rem;
      }
      .num {
        font-size: 1.5rem;
      }
    }
  }
  .setting {
    position: absolute;
    top: 2.875rem;
    right: 2.25rem;
  }
}
</style>